<template>
  <div class="title-box" :style="{'width': this.width}">
    <!-- <img class="title-img" src="@/images/bigscreen/device/bt.png" alt="" srcset=""> -->
    <p class="title">{{ titleName }}</p>
  </div>
</template>

<script>
export default {
  name: 'titleCom',
  props: {
    titleName: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.title-box {
  position: relative;
  width: 100%;
  .title-img {
    position: absolute;
    width: 3rem;
    top: 0.15rem;
  }
  .title {
    position: relative;
    z-index: 10;
    margin: 0;
    color: #fff;
    font-family: "shangshouhanshuti";
    font-size: 0.22rem;
    background: url('~@/images/bigscreen/device/item-title-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: .03rem .1rem;
    height: 0.4rem;
    line-height: 0.4rem;
    padding-left: 0.3rem;
  }
}
</style>